<template>
  <tr>
    <td>
      <img :src="dog.url" alt="" />
    </td>
    <td @click="clickFn" :style="{ background: '#' + color }">
      {{ dog.name }}
    </td>
  </tr>
</template>

<script>
export default {
  props: ['dog'],
  data() {
    return {
      color: 'FFF',
    }
  },
  methods: {
    clickFn() {
      const colors = [
        0,
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
      ]
      let col = ''
      for (let i = 0; i < 6; i++) {
        col += colors[Math.floor(Math.random() * colors.length)]
      }
      // console.log(col)
      this.color = col
      this.$emit('dogType', this.dog.name)
    },
  },
}
</script>

<style scoped>
tr {
  display: flex;
  flex-direction: column;
  line-height: 75px;
  width: 300px;
  text-align: center;
  border: 1px solid black;
}
img {
  display: block;
  width: 300px;
  height: 200px;
}
</style>
